<template>
  <div>
    <!-- 标签页布局 -->
    <a-tabs
      v-if="record.type === 'tabs' && (record.options.hidden ? false : true)"
      class="grid-row"
      :default-active-key="0"
      :tabBarGutter="record.options.tabBarGutter"
      :type="record.options.type"
      :size="record.options.size"
      :tabPosition="record.options.tabPosition"
      :animated="record.options.animated"
      v-model="activeKey"
    >
      <a-tab-pane v-for="(tabItem, index) in record.columns" :key="index" :tab="tabItem.label" :forceRender="true">
        <buildBlocks
          :class="FactiveItem == record.pk ? 'checkBox' : ''"
          ref="nestedComponents"
          v-on="$listeners"
          v-for="item in tabItem.list"
          :disabled="disabled"
          :key="item.key"
          :record="item"
          :formConfig="formConfig"
          :formJson="formJson"
          :formData="formData"
          :pattern="pattern"
          :FactiveItem="FactiveItem"
          :activeList="activeList"
          :childrenFormData="childrenFormData"
          :defaultHidden="defaultHidden"
          :fieldMap="fieldMap"
          :nowStepid="nowStepid"
        />
      </a-tab-pane>
    </a-tabs>
    <!-- 栅格布局 -->
    <a-row
      v-else-if="record.type === 'grid' && (record.options.hidden ? false : true)"
      :class="`grid-row ${record.options.class ? showClass(record.options) : ''}`"
      :gutter="record.options.gutter"
    >
      <template v-if="showChange(record.options.expression)">
        <a-col
          class="grid-col"
          style="min-height: 42px"
          v-for="(colItem, idnex) in record.columns"
          :key="idnex"
          :span="colItem.span || 0"
        >
          <buildBlocks
            :class="FactiveItem == record.pk ? 'checkBox' : ''"
            ref="nestedComponents"
            v-on="$listeners"
            v-for="item in colItem.list"
            :disabled="disabled"
            :key="item.key"
            :record="item"
            :formConfig="formConfig"
            :formJson="formJson"
            :formData="formData"
            :pattern="pattern"
            :FactiveItem="FactiveItem"
            :activeList="activeList"
            :childrenFormData="childrenFormData"
            :defaultHidden="defaultHidden"
            :fieldMap="fieldMap"
            :nowStepid="nowStepid"
          />
        </a-col>
      </template>
    </a-row>
    <!-- 卡片布局 -->
    <a-card
      v-else-if="record.type === 'card' && (record.options.hidden ? false : true)"
      :class="['grid-row', record.options.boxShadow ? 'boxShadow' : '']"
      size="small"
    >
      <template v-if="showChange(record.options.expression)">
        <div class="cardTitle" slot="title">
          {{ record.label }}
        </div>
        <!-- 卡片右上角按钮 (审批端只显示通用树组件角标) -->
        <a
          class="card_a"
          v-if="record.options.moreActions && record.options.modalClick == 'GENERAL'"
          @click="btnClick(record.options.modalClick || null)"
          slot="extra"
          href="javascript:void(0);"
        >
          详情
        </a>
        <buildBlocks
          :class="FactiveItem == record.pk ? 'checkBox' : ''"
          ref="nestedComponents"
          v-on="$listeners"
          v-for="item in record.list"
          :disabled="disabled"
          :key="item.key"
          :record="item"
          :formConfig="formConfig"
          :formJson="formJson"
          :formData="formData"
          :pattern="pattern"
          :FactiveItem="FactiveItem"
          :activeList="activeList"
          :childrenFormData="childrenFormData"
          :defaultHidden="defaultHidden"
          :fieldMap="fieldMap"
          :nowStepid="nowStepid"
        />
      </template>
    </a-card>
    <!-- 表格布局 -->
    <table
      v-else-if="record.type === 'table' && (record.options.hidden ? false : true)"
      class="kk-table-9136076486841527"
      :class="{
        bright: record.options.bright,
        small: record.options.small,
        bordered: record.options.bordered,
      }"
      :style="record.options.customStyle"
    >
      <template v-if="showChange(record.options.expression)">
        <tr v-for="(trItem, trIndex) in record.trs" :key="trIndex">
          <td
            class="table-td"
            v-for="(tdItem, tdIndex) in trItem.tds.filter((item) => item.colspan && item.rowspan)"
            :key="tdIndex"
            :colspan="tdItem.colspan"
            :rowspan="tdItem.rowspan"
            :style="[{ backgroundColor: tdItem.color }, { width: tdItem.width }]"
          >
            <template v-if="showChange(tdItem.expression)">
              <buildBlocks
                :class="FactiveItem == record.pk ? 'checkBox' : ''"
                ref="nestedComponents"
                v-on="$listeners"
                v-for="item in tdItem.list"
                :disabled="disabled"
                :key="item.key"
                :record="item"
                :formConfig="formConfig"
                :formJson="formJson"
                :formData="formData"
                :pattern="pattern"
                :FactiveItem="FactiveItem"
                :activeList="activeList"
                :childrenFormData="childrenFormData"
                :defaultHidden="defaultHidden"
                :fieldMap="fieldMap"
                :nowStepid="nowStepid"
              />
            </template>
          </td>
        </tr>
      </template>
    </table>

    <!-- 表单控件 -->
    <FormItem
      :class="FactiveItem == record.pk ? 'checkBox' : ''"
      v-else-if="!record.options.hidden"
      ref="formItemRef"
      v-on="$listeners"
      :key="record.pk"
      :v="record"
      :formConfig="formConfig"
      :formJson="formJson"
      :formData="formData"
      :pattern="pattern"
      :FactiveItem="FactiveItem"
      :activeList="activeList"
      :childrenFormData="childrenFormData"
      :defaultHidden="defaultHidden"
      :fieldMap="fieldMap"
      :nowStepid="nowStepid"
    />
    <!-- 通用树查看组件 -->
    <GENERAL ref="generalRef" />
  </div>
</template>
<script>

export default {
  name: 'buildBlocks',
  props: {
    // 表单环节配置的数据
    fieldMap: {
      type: Object,
      default: () => ({}),
    },
    // 当前环节
    nowStepid: {
      type: String,
      default: '',
    },
    record: {
      type: Object,
      required: true,
    },
    formConfig: {
      type: Object,
      required: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    // 表单json
    formJson: {
      type: Object,
      default: () => ({}),
    },
    // 表单数据Map
    formData: {
      type: Object,
      default: () => ({}),
    },
    // 是否是渲染模式
    pattern: {
      type: Number,
      default: 3,
    },
    // 需要背景激活的项
    FactiveItem: {
      type: String,
      default: '',
    },
    // 需要显示的
    activeList: {
      type: Array,
      default() {
        return []
      },
    },
    // 永久隐藏的表单项
    defaultHidden: {
      type: Array,
      default() {
        return []
      },
    },
    // 操作模式下回显数据
    childrenFormData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  components: {
    FormItem: () => import('@/views/FormAssembly/formItem.vue'),
    GENERAL: () => import('@/views/FormAssembly/general.vue'),
  },
  data() {
    return {
      generalConfig: {}, // 通用树配置
      classTemp: '',
      activeKey: 0,
    }
  },
  created() {
    // console.log('爸爸给的事件: ', this.$listeners)
    // if (this.record.options.moreActions) {
    //   console.log('Build', this.$store.state.formLayout.layoutData)
    //   console.log('record', this.record)
    // }
  },
  methods: {
    // 样式显示-响应式
    showClass(options) {
      // 控件隐藏状态下样式配置无效
      if (this.pattern != 3 || options.hidden) {
        return ''
      }
      try {
        return eval(options.class) || ''
      } catch (error) {
        console.error(`样式显示-响应式解析失败: ${options.class}, eror -> ${error}`)
        return ''
      }

      // return eval(record.options.class)
    },
    // 控件显示-响应式
    showChange(expression) {
      // 环节配置下不进行计算
      if (this.$route.path.indexOf('Wf_NodeEdit') > -1) {
        return true
      }
      if (expression == undefined || expression == '') {
        return true
      } else {
        console.log('表达式', expression)
        return eval(expression)
        // return true
      }
    },
    // 按钮组件的点击事件
    btnClick(value) {
      // ^ 通用模态框单独定制显示组件
      if (value == 'GENERAL') {
        if (this.$store.state.formLayout?.layoutData?.componentJson?.analysisObj?.generalConfig) {
          console.log('通用树配置', this.$store.state.formLayout?.layoutData?.componentJson?.analysisObj?.generalConfig)
          this.$refs.generalRef.f_init(
            this.$store.state.formLayout?.layoutData?.componentJson?.analysisObj?.generalConfig
          )
        } else {
          this.$message.warning('未找到对应的通用树配置')
        }
        
      } else {
        this.$listeners.f_btnClick(value)
      }
    },
    // 表单校验
    buildCheck(dom) {
      if (dom.$refs.formItemRef != undefined) {
        this.$refs.formItemRef.fTableCheck(this.record)
      }
    },
    findRefs(dom) {
      if (dom.$refs != undefined) {
        if (dom.$refs.formItemRef != undefined) {
          return dom.$refs
        } else {
          this.findRefs(dom.$refs)
        }
      } else {
        return dom
      }
    },
  },
}
</script>

<style lang="less" scoped>
// .row-warn {
//   border: 1px solid red;
// }
// .boxShadow {
//   -moz-box-shadow: 5px 5px 5px #ccc;
//   -webkit-box-shadow: 5px 5px 5px #ccc;
//   box-shadow: 5px 5px 5px #ccc;
// }
// .checkBox {
//   background-color: #e6f7ff;
// }
// /deep/ .ant-card-body {
//   padding: 0 !important;
// }
// /deep/ .ant-card-extra {
//   background-color: #d8ebfd;
//   height: 40px;
// }
// // 卡片角标
// .card_a {
//   margin-right: 16px;
//   font-variant: tabular-nums;
//   line-height: 1.5;
//   list-style: none;
//   font-feature-settings: 'tnum';
//   font-weight: 600;
//   font-size: 15px;
// }
// .cardTitle {
//   display: flex;
//   align-items: center;
//   justify-content: space-between;
//   height: 40px;
//   background: linear-gradient(45deg, #59abf8, #88c2f8, #a9d5ff, #d8ebfd);
//   padding: 15px;
//   font-size: 15px;
//   font-weight: 600;
//   color: #fff;
//   letter-spacing: 1px;
// }
// /deep/ .ant-card-head {
//   padding: 0px !important;
//   height: 40px;
// }
// /deep/ .ant-card-head-title {
//   padding: 0px !important;
// }
/* 假设：外层遮挡的类名为：outer，被遮挡的类名为：Inner。
1：在不破坏原有样式的基础上增加position: relative;然后z-index控制谁在上面即可 */
</style>
